<script setup>
import { message, Modal } from 'ant-design-vue';
import { ref } from 'vue'
import icon_antd from '../../assets/antd.svg';
import icon_vue from '../../assets/vue.svg';

const count = ref(0)
const onClick = function () {
  count.value++
  if (count.value >= 5) {
    Modal.confirm({
      title: '提示',
      content: '你真的要点我吗？',
      onOk() {
        message.success('你点我啦')
      },
      onCancel() {
        message.error('你点我啦')
      },
    })
  }
}
</script>

<template>
  <div class="home-page">
    <div class="welcome-section">
      <h1>欢迎使用 Vue3 + Ant Design Vue 应用</h1>
      <p class="subtitle">这是一个现代化的前端应用示例</p>
    </div>

    <div class="logo-section">
      <a href="https://www.antdv.com/docs/vue/introduce-cn" target="_blank">
        <img :src="icon_antd" class="logo" alt="Ant Design logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img :src="icon_vue" class="logo vue" alt="Vue logo" />
      </a>
    </div>

    <div class="features-section">
      <h2>功能特性</h2>
      <div class="feature-grid">
        <div class="feature-card">
          <h3>🏠 首页</h3>
          <p>当前页面，展示应用概览和欢迎信息</p>
        </div>
        <div class="feature-card">
          <h3>✅ TODO管理</h3>
          <p>完整的待办事项管理功能，支持添加、删除、标记完成</p>
        </div>
        <div class="feature-card">
          <h3>🎨 现代化UI</h3>
          <p>基于Ant Design Vue的美观界面设计</p>
        </div>
        <div class="feature-card">
          <h3>🚀 Vue3 + Router</h3>
          <p>使用最新的Vue3 Composition API和Vue Router 4</p>
        </div>
      </div>
    </div>

    <div class="links-section">
      <p>
        了解更多关于Vue的IDE支持，请查看
        <a
          href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
          target="_blank"
        >Vue文档扩展指南</a>
      </p>
      <p class="read-the-docs">点击Ant Design和Vue的logo了解更多信息</p>
    </div>
  </div>
</template>

<style scoped>
.home-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h1 {
  color: #1890ff;
  font-size: 2.5em;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.2em;
  color: #666;
}

.logo-section {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.features-section {
  margin-bottom: 40px;
}

.features-section h2 {
  text-align: center;
  color: #1890ff;
  margin-bottom: 30px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  color: #1890ff;
  margin-bottom: 10px;
}

.feature-card p {
  color: #666;
  line-height: 1.6;
}

.demo-section {
  margin-bottom: 40px;
}

.demo-section h2 {
  text-align: center;
  color: #1890ff;
  margin-bottom: 20px;
}

.card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.demo-text {
  margin-top: 20px;
  color: #666;
}

.links-section {
  text-align: center;
  color: #666;
}

.links-section a {
  color: #1890ff;
  text-decoration: none;
}

.links-section a:hover {
  text-decoration: underline;
}

.read-the-docs {
  color: #888;
  margin-top: 20px;
}
</style>
